<template>
  <div class="header">
    <div class="header-top">
      <span class="iconfont"
            @click="back">
        &#xe60e;
      </span>
      <span class="header-city">城市选择</span>
    </div>
    <div class="header-bottom">
      <div class="header-in">
        <span>境内</span>
      </div>
      <div class="header-out">
        <span>境外·港澳台</span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  methods: {
    //返回上一级路由的方法，是（返回）
    //当然也可以用routerlink的方法直接定向
    back () {
      this.$router.go(-1);
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~css/var.styl'
.header
  background $bgColor
  width 100%
  height 1.5rem
.header-top
  position relative
  height 0.5rem
  font-size 0.38rem
  color #fff
  line-height 0.5rem
  padding-top 0.2rem
.iconfont
  font-size 0.4rem
  position absolute
  padding-left 0.2rem
.header-city
  display block
  text-align center
  font-weight 600
.header-bottom
  display flex
  font-size 0.32rem
  font-weight bold
  height 0.52rem
  line-height 0.5rem
  width 6rem
  margin 0 auto
  margin-top 0.18rem
  color #fff
  text-align center
  vertical-align center
.header-in
  box-sizing border-box
  background #fff
  width 50%
  border 1px solid #fff
  color $bgColor
.header-out
  width 50%
  border 1px solid #fff
</style>>

